<template>
  <view class="content">
    <u-loading-page :loading="show" v-if="show"></u-loading-page>
    <view v-else>
      <u-navbar title="订单详情" :autoBack="true" leftIconColor='#333'>
      </u-navbar>
      <view class="wait-card" v-if="orderdetails.order_state == 10">
        <view class="wait-had">等待支付,剩余 <u-count-down :time="orderdetails.lv_time*1000" format="mm:ss"></u-count-down>
        </view>
        <view class="wait-prompt">支付后预计送达时间将更新，早支付早送达，<text>超过15分钟未支付</text>
          ，订单将被自动取消，快去支付吧。</view>
        <view class="wait-class">
          <view class="class-item" @click="soonbtn(orderdetails.id)">
            <view><text class="iconfont icon-daifukuan"></text></view>
            <text style="color: #999;font-size: 24rpx;">立即支付</text>
          </view>
          <view class="class-item" @click="modify">
            <view><text class="iconfont icon-bianji"></text></view>
            <text style="color: #999;font-size: 24rpx;">修改地址</text>
          </view>
          <view class="class-item" @click="cancel = true">
            <view><text class="iconfont icon-quxiao"></text></view>
            <text style="color: #999;font-size: 24rpx;">取消订单</text>
          </view>
        </view>
      </view>
      <view class="card-variety">
        <OrderShopping :orderdetails='orderdetails.goods'></OrderShopping>
      </view>
      <ExpendIture :orderInfo='orderdetails'></ExpendIture>
      <!-- <view class="payment-footer"> -->
      <DetailsInfo :orderInfo='orderdetails'></DetailsInfo>
      <!-- </view> -->
      <u-modal :show="cancel" width="500rpx" @confirm="outpay" :closeOnClickOverlay="true" @close="cancel = false">
        <text>亲~确定要取消您的订单吗？</text>
      </u-modal>
      <u-toast ref="uToasts"></u-toast>
    </view>
  </view>
</template>

<script>
  import expenditure from '../components/expenditure.vue'
  import ordershopping from '../components/ordershopp.vue'
  import detailsinfo from '../components/detailsinfo.vue'
  import {
    getorderdetails
  } from '@/api/commodity.js'
  import {
    soonpay,
    ordercancel
  } from '@/api/place.js'
  export default {
    data() {
      return {
        orderdetails: {},
        show: true,
        params: {},
        cancel: false
      }
    },
    components: {
      OrderShopping: ordershopping,
      ExpendIture: expenditure,
      DetailsInfo: detailsinfo
    },
    computed: {
      minutes() {
        // 计算分钟数
        return Math.floor(this.orderdetails.lv_time / 60);
      },
      seconds() {
        // 计算剩余的秒数
        return this.orderdetails.lv_time % 60;
      }
    },
    methods: {
      async getdetailapi(id) {
        const res = await getorderdetails(id)
        this.orderdetails = res.data
        this.show = false
      },
      async soonbtn(id) {
        this.pay = true
        uni.requestPayment({
          ...this.params,
          success(res) {
            uni.showToast({
              title: '支付成功',
              icon: 'success',
            })
            uni.navigateBack({
              delta: 1
            })
          },
          fail(err) {
            uni.showToast({
              title: '支付失败',
              icon: 'error'
            })
          }
        })
      },
      async soonapi(id) {
        const {
          data
        } = await soonpay(id)
        this.params = data.params
      },
      modify() {
        this.$refs.uToasts.show({
          message: "修改订单请联系商家"
        })
      },
      async outpay() {
        await ordercancel(this.orderdetails.id)
        this.cancel = false
        this.$refs.uToasts.show({
          message: "订单已取消"
        })
        uni.redirectTo({
          url: '/page_allorders/index'
        })
      }
    },
    onLoad(el) {
      this.getdetailapi(el.id)
      this.soonapi(el.id)
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fafafa;
  }

  .content {
    padding: 200rpx 40rpx 0 40rpx;
  }

  .wait-card {
    background-color: #fff;
    padding: 24rpx 32rpx;
    border-radius: 20rpx;

    .wait-had {
      font-size: 36rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .u-count-down__text {
        font-size: 36rpx;
        margin-left: 10rpx;
        font-weight: bold;
      }

      text {
        color: #025E21;
      }
    }

    .wait-prompt {
      color: #999;
      font-size: 24rpx;
      margin: 20rpx 0;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #f2f2f2;

      text {
        color: #025E21;
      }
    }

    .wait-class {
      display: flex;
      justify-content: space-between;

      .class-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        view {
          width: 80rpx;
          height: 80rpx;
          background-color: #025E21;
          color: #fff;
          text-align: center;
          line-height: 80rpx;
          border-radius: 50%;
          margin-bottom: 14rpx;

          .icon-daifukuan {
            font-size: 46rpx;
          }
        }
      }
    }
  }

  .card-variety {
    padding: 14rpx 28rpx 36rpx 24rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin: 20rpx 0;
  }

  // .payment-footer{
  // 	background-color: #fff;
  // 	border-radius: 20rpx;
  // 	font-size: 24rpx;
  // 	padding: 20rpx 28rpx 20rpx 20rpx;
  // 	margin-top: 20rpx;
  // }
</style>